<template>
    <div class="ChangePassword">
        <div class="reset-box">
            <img src="https://img.podpartner.com/static/images-20230202/forget-reset.png" class="forget-reset" />
            <h1>Password reset</h1>
            <div class="input-box">
                <el-input v-model="pswData.new" :type="!suffixShow.psw ? 'text' : 'password'" placeholder="Please enter a new password" @blur="checkpsw(0)">
                    <template slot="suffix">
                        <i v-if="suffixShow.psw" class="iconfont icon-dakaiyincang psw-icon" @click="suffixShow.psw = false"></i>
                        <i v-if="!suffixShow.psw" class="iconfont icon-guanbiyincang psw-icon" @click="suffixShow.psw = true"></i>
                    </template>
                </el-input>
                <p class="tipstr">{{ this.pswTip.new }}</p>
            </div>
            <div class="input-box">
                <el-input v-model="pswData.old" :type="!suffixShow.checkpsw ? 'text' : 'password'" placeholder="Confirm password" @blur="checkpsw(1)">
                    <template slot="suffix">
                        <i v-if="suffixShow.checkpsw" class="iconfont icon-dakaiyincang psw-icon" @click="suffixShow.checkpsw = false"></i>
                        <i v-if="!suffixShow.checkpsw" class="iconfont icon-guanbiyincang psw-icon" @click="suffixShow.checkpsw = true"></i>
                    </template>
                </el-input>
                <p class="tipstr">{{ this.pswTip.old }}</p>
            </div>
            <div class="btn-box">
                <div @click="doPutPass">OK</div>
            </div>
        </div>
        <div v-if="success" class="success-box">
            <div class="success">
                <i class="iconfont icon-mimagenggaiwancheng"></i>
                <div class="text-box">
                    <p>Password occurred successfully</p>
                    <p>
                        Return to the homepage of PODpartner platform after
                        {{ this.num }}S
                    </p>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import RE from "@/utils/RE";
import Md5 from "js-md5";
export default {
    name: "ChangePassword",
    data () {
        return {
            suffixShow: {
                psw: true,
                checkpsw: true,
            },
            pswData: {
                new: "",
                old: "",
            },
            pswTip: {
                new: "",
                old: "",
            },
            num: 3,
            success: false,
        };
    },
    methods: {
        //检测密码
        checkpsw (n) {
            if (n == 0) {
                this.pswTip.new = "";
                if (this.pswData.new == "") {
                    this.pswTip.new = "Password cannot be empty";
                    return false;
                } else {
                    if (!RE.psw.test(this.pswData.new)) {
                        this.pswTip.new =
                            "The password must contain 6 to 18 digits of uppercase and lowercase letters and digits";
                        return false;
                    } else {
                        this.pswTip.new = "";
                    }
                }
            }
            if (n == 1) {
                this.pswTip.old = "";
                if (this.pswData.new == this.pswData.old) {
                    this.pswTip.old = "";
                } else {
                    this.pswTip.old =
                        "The confirmation password is inconsistent with the new password. Please re-enter";
                    return false;
                }
            }
        },
        async doPutPass () {
            let al = true;
            if (this.checkpsw(0) == false) al = false;
            if (al) {
                if (this.checkpsw(1) == false) al = false;
            }
            if (al) {
                let resdata = {
                    bearer: this.$route.query.t,
                    password: Md5(this.pswData.new),
                    password_verify: Md5(this.pswData.old),
                };
                let res = await this.$http("putChangePass", resdata);
                if (res.code == 0) {
                    this.$uxMessage.success("Modified successfuly!");
                    this.success = true;
                    this.timeout = setInterval(() => {
                        if (this.num <= 0) {
                            this.success = false;
                            this.$router.replace("/");
                            clearInterval(this.timeout);
                        } else {
                            this.num -= 1;
                        }
                    }, 1000);
                    return;
                }
                this.$uxMessage.warning(res.msg);
            }
        },
        async checkToken () { },
    },
    created () {
        if (process.client) {
            if (!this.$route.query.t) {
                // this.$router.push("/document/login-error");
            }
        }
    },
    mounted () { },
};
</script>
<style lang="scss" scoped>
.success-box {
    z-index: 1000;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba($color: #000000, $alpha: 0.4);
    .success {
        background: #ffffff;
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 600px;
        height: 460px;
        border-radius: 8px;
        padding: 114px 0 0 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        i {
            font-size: 88px;
            color: #1ac4a8;
            margin: 0 0 60px 0;
        }
        .text-box {
            width: 360px;
            font-size: 16px;

            color: #666666;
            text-align: center;
            p {
                &:first-child {
                    font-size: 24px;

                    color: #000000;
                    margin: 0 0 16px;
                }
            }
        }
    }
}

.psw-icon {
    font-size: 24px;
    color: #666;
}

.ChangePassword {
    padding: 100px 0 0;
    .reset-box {
        position: absolute;
        top: 45%;
        left: 50%;
        transform: translate(-50%, -50%);
        display: flex;
        flex-direction: column;
        align-items: center;
        > h1 {
            margin: 40px 0 24px;
            font-size: 24px;

            font-weight: 400px;
            color: #000000;
        }
        .input-box {
            height: 94px;
            ::v-deep .el-input__inner {
                width: 360px;
                height: 42px;
                background: #ffffff;
                border-radius: 4px;
                border: 1px solid #d9d9d9;
            }
        }
        .btn-box {
            div {
                &:first-child {
                    cursor: pointer;
                    width: 360px;
                    height: 42px;
                    background: #ea4c89;
                    border-radius: 4px;
                    font-size: 14px;

                    font-weight: 600;
                    color: #ffffff;
                    line-height: 42px;
                    text-align: center;
                    margin: 0 0 24px 0;
                }
            }
        }
    }
    .forget-reset {
        max-width: 124px;
        max-height: 124px;
    }
}

.tipstr {
    width: 360px;
    margin-top: 2px;
    color: lightcoral;
    font-size: 12px;
}
::v-deep .el-input__suffix {
    display: flex;
    align-items: center;
}
</style>
